<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="codeOH" />
    <title>空气质量监测系统</title>
    <!-- <link href="https://fonts.font.im/css?family=Kirang+Haerang" rel="stylesheet"> -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet"> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
    <script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
    <!-- <link rel="stylesheet" href="../public/stylesheets/dashboard.css"> -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        /* font-family: 'Kirang Haerang', cursive; */
        /* font-family: 'Ma Shan Zheng', cursive; */
      }

      #main {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30em;
        height: 22em;
        background-color: azure;
        border-radius: 0.5em;
      }

      #mainStation {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(20%, -50%);
        width: 30em;
        height: 20em;
        background-color: azure;
        border-radius: 0.5em;
      }

      #main h4,
      #mainStation h4 {
        margin: 0.5em auto;
        font-size: 1.5em;
        text-align: center;
      }

      #main .history-aqi {
        position: absolute;
        bottom: 0.7em;
        right: 2.4em;
        color: #000;
        cursor: pointer;
        text-decoration: underline;
      }

      .amap-scalecontrol {
        bottom: 0 !important;
        z-index: 1001;
      }

      .amap-scale-text {
        color: #000;
      }

      .hide {
        position: absolute;
        left: 10vw;
        bottom: 0;
        width: 96px;
        height: 24px;
        background-color: #0a141c;
        z-index: 1000;
      }

      .city-info,
      .station-info {
        margin: 0 auto;
        margin-top: 1em;
        padding: 0;
        width: 25em;
        border: 1px solid #000;
        font-size: 1em;
        text-align: center;
      }

      .city-info li,
      .station-info li {
        display: flex;
        list-style: none;
        border-bottom: 1px solid #000;
      }

      .city-info li:last-child,
      .station-info li:last-child {
        border: 0;
      }

      .city-info li span:first-child,
      .station-info li span:first-child {
        flex: 1;
        border-right: 1px solid #000;
      }

      .city-info > li > span:last-child,
      .station-info > li > span:last-child {
        flex: 2;
      }

      .top-bar {
        height: 1.5em;
        background: #000;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;
      }

      .close {
        position: absolute;
        top: 0em;
        right: 0.4em;
        padding: 0.2em;
        font-size: 1.5em;
        height: 1em;
        width: 1em;
        text-indent: 10em;
        overflow: hidden;
        border: 0;
        cursor: pointer;
        color: #fff;
        background: #000;
        outline: none;
      }

      .close::after {
        position: absolute;
        top: 0em;
        right: 0;
        text-indent: 0;
        content: "\00D7";
      }

      .page {
        display: flex;
        height: 100%;
      }

      .side-bar {
        /* float: left; */
        /* width: 15%; */
        position: sticky;
        flex: 1;
        margin-top: 5vh;
        height: 95vh;
        background-color: #f8f9fa;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
      }

      .side-bar > .menu {
        list-style: none;
      }

      .side-bar > .menu > li {
        margin: 0;
        padding: 2em 2em;
        text-align: center;
        border-bottom: 1px solid #000;
        line-height: 1.8;
        transition: all 0.3s linear;
      }

      .side-bar > .menu > li:hover {
        background-color: gray;
      }

      .side-bar > .menu > li:active {
        background-color: dimgray;
        box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
          0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
      }

      #container {
        /* float: left; */
        /* width: 85%; */
        flex: 8;
        margin-top: 5vh;
        width: 100vh;
      }

      .chart-outer {
        position: absolute;
        display: none;
        height: 420px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0.5em;
        z-index: 10;
      }

      #chart {
        padding-top: 1em;
        width: 600px;
        height: 400px;
        background-color: linen;
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
      }

      .chart-outer .btn,
      .chart-history-outer .btn {
        height: 20.8px;
        width: 100%;
        background-color: darkseagreen;
        font-size: 1.5rem;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;
      }

      .cmainStationhart-outer button,
      .chart-history-outer button {
        position: absolute;
        top: 0.1em;
        right: 0.3em;
        width: 1em;
        height: 1em;
        padding: 0em 0.3em;
        background-color: darkseagreen;
        color: #000;
        border: 0;
        outline: none;
        cursor: pointer;
      }

      .chart-outer button::after,
      .chart-history-outer button::after {
        position: absolute;
        top: -0.15em;
        right: 0.15em;
        font-size: 2rem;
        text-indent: 0;
        content: "\00D7";
      }

      .chart-history-outer {
        position: absolute;
        display: none;
        height: 620px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0.5em;
        z-index: 10;
      }

      #chart-history {
        padding-top: 1em;
        width: 1000px;
        height: 600px;
        background-color: linen;
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
      }

      /* .tuli {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 200px;
          height: 400px;
          z-index: 1000000000;
          background-image: url('../public/images/tuli.PNG');
        } */
      .topbar {
        position: absolute;
        height: 5vh;
        width: 100%;
        background-color: #343a40 !important;
        color: #fff;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        text-indent: 2em;
        letter-spacing: 0.05em;
        z-index: 1000000000;
      }

      .topbar h3 {
        margin: 10px 0;
      }

      .topbar button {
        position: absolute;
        right: 1em;
        top: 1em;
        background-color: transparent;
        color: #fff;
        border: none;
        outline: none;
      }

      .amap-logo {
        display: none !important;
      }
    </style>
  </head>

  <body>
    <!-- <div class="tuli"></div> -->
    <!-- <img src="../public/images/tuli.PNG" alt=""> -->

    <div class="page">
      <nav class="topbar">
        <h3>空气质量监测系统</h3>
        <button>退出</button>
      </nav>
      <div class="side-bar">
        <ul class="menu">
          <li>AQI TOP10</li>
          <li>AQI LAST10</li>
          <li class="heatmap">热力图</li>
          <li>空气质量预测</li>
          <li>空气质量预警</li>
          <li>加载监测站图层</li>
          <li>科普小课堂</li>
          <!-- <li>热力图</li> -->
        </ul>
      </div>
      <div id="container" class="container">
        <div class="hide"></div>
      </div>
    </div>

    <div id="mainStation">
      <div id="top-bar" class="top-bar"></div>
      <h4>监测站信息</h4>

      <ul class="station-info">
        <li><span>时间</span><span></span></li>
        <li><span>城市名</span><span></span></li>
        <li><span>监测站</span><span></span></li>
        <li><span>AQI</span><span></span></li>
        <li><span>空气等级</span><span></span></li>
        <li><span>pm2.5</span><span></span></li>
        <li><span>pm10</span><span></span></li>
      </ul>

      <button class="close"></button>
    </div>

    <div id="main">
      <div id="top-bar" class="top-bar"></div>
      <h4>城市信息</h4>

      <ul class="city-info">
        <li><span>时间</span><span></span></li>
        <li><span>城市名</span><span></span></li>
        <li><span>AQI</span><span></span></li>
        <li><span>空气等级</span><span></span></li>
        <li><span>温度</span><span></span></li>
        <li><span>湿度</span><span></span></li>
        <li><span>天气</span><span></span></li>
        <li><span>风向</span><span></span></li>
        <li><span>风速</span><span></span></li>
      </ul>

      <div class="history-aqi" href="">历史AQI</div>
      <!-- 关闭小窗口 -->
      <button class="close"></button>
    </div>

    <div id="chart-outer" class="chart-outer">
      <div class="btn top-bar"><button></button></div>
      <div id="chart"></div>
    </div>

    <div class="chart-history-outer">
      <div class="btn"><button></button></div>
      <div id="chart-history" class="chart-history"></div>
    </div>

    <!-- <div class="history-outer">
      <div class="btn"><button></button></div>
      <div class="history"></div>
    </div> -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=2bae139a5a4b855432ef70629ab67859"></script>
    <script src="https://webapi.amap.com/loca?v=1.3.2&key=2bae139a5a4b855432ef70629ab67859"></script>
    <script>
      const data = [];

      const url = "";

      // 定义地图
      let map = new AMap.Map("container", {
        // mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
        mapStyle: "amap://styles/fresh",
        zoom: 4,
        center: [107.4976, 32.1697],
        features: ["bg", "road"],
        pitch: 56,
        viewMode: "2D",
        // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
        // viewMode: '3D'
      });

      var layer = new Loca.PointLayer({
        map: map,
        eventSupport: true,
      });

      async function forNothing(url, data, next) {
        const response = await fetch(url);
        data = await response.json();
        // console.log(data);
        next(data);
      }

      function loadMap(data) {
        AMap.plugin("AMap.Autocomplete", function () {
          // 实例化Autocomplete
          var autoOptions = {
            //city 限定城市，默认全国
            city: "全国",
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(keyword, function (status, result) {
            // 搜索成功时，result即是对应的匹配数据
          });
        });
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.MapType",
            // 'AMap.Geolocation',
            // 'AMap.OverView'
          ],
          function () {
            //控制地图的缩放和平移
            map.addControl(
              new AMap.ToolBar({
                autoPosition: true,
                locationMarker: new AMap.Marker(),
              })
            );
            //比例尺
            map.addControl(new AMap.Scale());
            //地图类型切换
            map.addControl(new AMap.MapType());
            //
            // map.addControl(new AMap.Geolocation());
            //鹰眼视图
            // const overview = new AMap.OverView();

            // map.addControl(overview);
            // overview.close();
            //事件
            //overview.
          }
        );
        //创建右键菜单
        var contextMenu = new AMap.ContextMenu();
        //右键放大
        contextMenu.addItem(
          "放大一级",
          function () {
            map.zoomIn();
          },
          0
        );

        //右键缩小
        contextMenu.addItem(
          "缩小一级",
          function () {
            map.zoomOut();
          },
          1
        );

        //右键显示全国范围
        contextMenu.addItem(
          "缩放至全国范围",
          function (e) {
            map.setZoomAndCenter(4, [108.946609, 34.262324]);
          },
          2
        );

        // //右键添加Marker标记
        // contextMenu.addItem("添加标记", function (e) {
        //   var marker = new AMap.Marker({
        //     map: map,
        //     position: contextMenuPositon //基点位置
        //   });
        // }, 3);

        //地图绑定鼠标右击事件——弹出右键菜单
        map.on("rightclick", function (e) {
          contextMenu.open(map, e.lnglat);
          contextMenuPositon = e.lnglat;
        });

        layer.setMap(map);

        const cities = [];

        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          if (
            item.name != "" &&
            item.pos != "" &&
            item.aqi != 0 &&
            item.level &&
            item.time != ""
          ) {
            cities.push({
              id: item._id,
              name: item.name,
              center: item.pos,
              aqi: item.aqi,
              level: item.level,
              time: item.time,
            });
          }
        }

        // console.log('The value of cities is ' + cities);

        layer.setData(cities, {
          type: "json",
          lnglat: "center",
        });

        layer.setOptions({
          style: {
            // 圆形半径，单位像素
            radius: 7,
            // 填充颜色
            color: (res) => {
              if (res.value.aqi == 0) return "";
              // console.log(res.value.aqi);
              const val = res.value.aqi;

              if (val > 300) return "#7e0123";
              else if (val > 200) return "#98004b";
              else if (val > 150) return "#fe0000";
              else if (val > 100) return "#ff7e00";
              else if (val > 50) return "#ffff00";
              else return "#01e400";
            },
            // 描边颜色
            borderColor: "",
            // 描边宽度，单位像素
            borderWidth: 0,
            // 透明度 [0-1]
            opacity: 1,
          },
          // selectStyle: {
          //   radius: 15,
          //   // 填充颜色
          //   color: (res2) => {
          //     if(res2.value.aqiLevel == '') return '#ffffff';
          //     // console.log(res.value.aqi);
          //     const value = res2.value.aqi;

          //     if (value > 300) return '#7e0123';
          //     else if (value > 200) return '#98004b';
          //     else if (value > 150) return '#fe0000';
          //     else if (value > 100) return '#ff7e00';
          //     else if (value > 50) return '#ffff00';
          //     else return '#01e400';
          //   },
          //   // 描边颜色
          //   borderColor: '#fff',
          //   // 描边宽度，单位像素
          //   borderWidth: 1,
          //   // 透明度 [0-1]
          //   opacity: 1,
          // }
        });

        layer.render();

        layer.on("click", function (event) {
          // console.log('Click target: ', event.target) // 触发click事件的元素
          // console.log('Event type: ', event.type) // 事件名称
          // console.log('Raw Event: ', event.originalEvent) // 原始DomEvent事件
          console.log("Raw data: ", event.rawData); // 触发元素对应的原始数据
          // console.log('LngLat: ', event.lnglat) // 元素所在经纬度

          //加载天气数据
          AMap.plugin("AMap.Weather", function () {
            //创建天气查询实例
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive(event.rawData.name, function (err, data) {
              // console.log(err, data);
              const cityInfo = $(".city-info")[0];
              main.style.display = "block";
              // main.textContent = JSON.stringify(event.rawData);
              const time = new Date(event.rawData.time);

              // console.log(event.rawData);
              cityInfo.children[0].children[1].textContent = time.toLocaleString();
              cityInfo.children[1].children[1].textContent = event.rawData.name;
              cityInfo.children[2].children[1].textContent = event.rawData.aqi;
              cityInfo.children[3].children[1].textContent =
                event.rawData.level;
              cityInfo.children[4].children[1].textContent =
                data.temperature + "℃";
              cityInfo.children[5].children[1].textContent =
                data.humidity + "%";
              cityInfo.children[6].children[1].textContent = data.weather;
              cityInfo.children[7].children[1].textContent = data.windDirection;
              cityInfo.children[8].children[1].textContent = data.windPower;
            });
          });

          $("#main .history-aqi")[0].addEventListener("click", function (e) {
            $(".chart-history-outer")[0].style.display = "block";

            const chart = $("#chart")[0];
            const url =
              "http://127.0.0.1:3000/api/get-cities-history/" +
              event.rawData.id;
            const dataHistory = [];

            forNothing(url, data, loadHistory);
          });
        });
      }

      forNothing("http://127.0.0.1:3000/api/getcities", data, loadMap);
    </script>
    <!-- 展示历史数据 -->
    <script>
      let myChart = null;

      function loadHistory(data) {
        // console.log(data);
        data = data.reverse();

        myChart = echarts.init(document.getElementById("chart-history"));
        const option = {
          title: {
            text: data[0].name + "历史AQI",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            data: data.map(function (item) {
              return new Date(item.time).toLocaleString();
            }),
          },
          yAxis: {
            splitLine: {
              show: false,
            },
          },
          toolbox: {
            left: "center",
            feature: {
              dataZoom: {
                yAxisIndex: "none",
              },
              restore: {},
              saveAsImage: {},
            },
          },
          dataZoom: [
            {
              startValue: "2020/9/11 下午7:00:00",
            },
            {
              type: "inside",
            },
          ],
          visualMap: {
            top: 10,
            right: 10,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: "#01e400",
              },
              {
                gt: 50,
                lte: 100,
                color: "#ffff00",
              },
              {
                gt: 100,
                lte: 150,
                color: "#ff7e00",
              },
              {
                gt: 150,
                lte: 200,
                color: "#fe0000",
              },
              {
                gt: 200,
                lte: 300,
                color: "#98004b",
              },
              {
                gt: 300,
                color: "#7e0123",
              },
            ],
            outOfRange: {
              color: "#999",
            },
          },
          series: {
            name: data[0].name + "历史AQI",
            type: "line",
            data: data.map(function (item) {
              return item.aqi;
            }),
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 50,
                },
                {
                  yAxis: 100,
                },
                {
                  yAxis: 150,
                },
                {
                  yAxis: 200,
                },
                {
                  yAxis: 300,
                },
              ],
            },
          },
        };

        myChart.setOption(option);
      }

      //关闭历史数据窗口
      const historyAQI = document.querySelector(".chart-history-outer button");
      historyAQI.addEventListener("click", (e) => {
        const chartHistoryOuter = document.getElementsByClassName(
          "chart-history-outer"
        );

        chartHistoryOuter[0].style.display = "none";
        myChart.clear();
        // myChart.dispose();
        // map.refresh()
      });
    </script>
    <!-- 加载监测站图层 -->
    <script>
      let layerStation = new Loca.PointLayer({
        map: map,
        eventSupport: true,
      });

      layerStation.setMap(map);

      function loadLayerStation(data) {
        const cityDetail = [];

        for (let i = 0; i < data.length; i++) {
          if (
            data[i] &&
            data[i].city &&
            data[i].station &&
            data[i].aqi != 0 &&
            data[i].level &&
            data[i].pm25 &&
            data[i].pos &&
            data[i].time
          ) {
            cityDetail.push({
              city: data[i].city,
              station: data[i].station,
              aqi: data[i].aqi,
              level: data[i].level,
              pm25: data[i].pm25,
              pm10: data[i].pm10,
              pos: data[i].pos,
              time: data[i].time,
            });
          }
        }

        // console.log(cityDetail)

        layerStation.setData(cityDetail, {
          type: "json",
          lnglat: "pos",
        });

        layerStation.setOptions({
          style: {
            // 圆形半径，单位像素
            radius: 7,
            // 填充颜色
            color: (res) => {
              if (res.value.aqi == 0) return "";
              // console.log(res.value.aqi);
              const val = res.value.aqi;

              if (val > 300) return "#7e0123";
              else if (val > 200) return "#98004b";
              else if (val > 150) return "#fe0000";
              else if (val > 100) return "#ff7e00";
              else if (val > 50) return "#ffff00";
              else return "#01e400";
            },
            // 描边颜色
            borderColor: "",
            // 描边宽度，单位像素
            borderWidth: 0,
            // 透明度 [0-1]
            opacity: 1,
          },
        });

        // layerStation.render();

        // map.remove(layerStation);
        layerStation.hide();

        layerStation.on("click", function (e) {
          console.log(e.rawData);
          const list = $(".station-info")[0];
          //加载station数据
          list.children[0].children[1].textContent = new Date(
            e.rawData.time
          ).toLocaleString();
          list.children[1].children[1].textContent = e.rawData.city;
          list.children[2].children[1].textContent = e.rawData.station;
          list.children[3].children[1].textContent = e.rawData.aqi;
          list.children[4].children[1].textContent = e.rawData.level;
          list.children[5].children[1].textContent = e.rawData.pm25;
          list.children[6].children[1].textContent = e.rawData.pm10;

          $("#mainStation")[0].style.display = "block";
        });
      }

      forNothing(
        "http://127.0.0.1:3000/api/getcitydetail",
        data,
        loadLayerStation
      );

      //监听地图缩放事件,当缩放级别大于5时显示layerStation,隐藏layer
      //当缩放级别小于等于5时显示layer,隐藏layerStation
      map.getZoom();
      map.on("zoomchange", function () {
        const zoom = map.getZoom();

        // console.log('缩放等级改变：'　+ zoom);

        if (zoom >= 8) {
          layer.hide();
          layerStation.show();
          // map.setLayers(layerStation)
        } else {
          layer.show();
          layerStation.hide();
          // map.remove(layerStation)
        }
      });
    </script>
    <script>
      // const myChart = echarts.init(document.getElementById('main'));
      // const option = {
      //   title: {
      //     text: '图表'
      //   },
      //   tooltip: {},
      //   legend: {
      //     data: ['销量']
      //   },
      //   xAxis: {
      //     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      //   },
      //   yAxis: {},
      //   series: [{
      //     name: '销量',
      //       type: 'bar',
      //       data: [5, 20, 36, 10, 10, 20]
      //   }]
      // };

      // myChart.setOption(option);

      //拖动效果
      function dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function (event) {
          var ev = event || window.event;
          event.stopPropagation();
          // console.log(ev);
          var disX = ev.clientX - Drag.offsetLeft;
          var disY = ev.clientY - Drag.offsetTop;
          document.onmousemove = function (event) {
            var ev = event || window.event;
            if (ev.clientX - disX - 240 < 0) {
              Drag.style.left = 240 + "px";
            } else if (ev.clientX - disX + 240 > window.innerWidth) {
              Drag.style.left = window.innerWidth - 240 + "px";
            } else {
              Drag.style.left = ev.clientX - disX + "px";
            }

            if (ev.clientY - disY - 160 < 0) {
              Drag.style.top = 160 + "px";
            } else if (ev.clientY - disY + 160 > window.innerHeight) {
              // console.log(ev.clientY - disY);
              Drag.style.top =
                window.innerHeight - Drag.clientHeight / 2 + "px";
              // console.log(738 - Drag.clientHeight);
            } else {
              Drag.style.top = ev.clientY - disY + "px";
            }
            Drag.style.cursor = "move";
          };
        };
        Drag.onmouseup = function () {
          document.onmousemove = null;
          this.style.cursor = "default";
        };
      }
      dragFunc("main");
      dragFunc("mainStation");
      // dragFunc("chart-outer");

      //关闭效果  main小窗口
      const close = document.querySelector("#main .close");
      close.addEventListener("click", (e) => {
        const main = document.getElementById("main");

        main.style.display = "none";
      });

      const cl = document.querySelector("#mainStation .close");

      cl.addEventListener("click", (e) => {
        const mainStation = document.getElementById("mainStation");

        mainStation.style.display = "none";
      });

      //绘制top 10统计图
      function drwaTopTen() {
        const myChart = echarts.init(document.getElementById("chart"));
        const option = {
          title: {
            text: "全国空气质量最佳城市排名",
          },
          legend: {
            data: ["AQI"],
          },
          xAxis: {},
          yAxis: {
            data: cityName,
          },
          series: [
            {
              name: "AQI",
              type: "bar",
              data: aqiSet,
            },
          ],
        };
        myChart.setOption(option);
      }
    </script>
    <!-- 加载topten和bottomten -->
    <script>
      const dataTen = [];
      const url1 = "http://127.0.0.1:3000/api/getcitiestopten";
      const url2 = "http://127.0.0.1:3000/api/getcitiesbottomten";

      function loadBar(data) {
        // console.log(data.length);
        const myChart1 = echarts.init(document.getElementById("chart"));
        const option = {
          title: {
            text: "全国空气质量最佳城市排名",
            left: "center",
          },
          tooltip: {},
          grid: {
            containLabel: true,
            bottom: 0,
            right: 120,
          },
          dataset: {
            dimensions: ["name", "aqi", "level", "time"],
            source: data.reverse(),
          },
          xAxis: {
            name: "AQI",
          },
          yAxis: {
            type: "category",
            // data: cityName
          },
          visualMap: [
            {
              orient: "vertical",
              type: "piecewise",
              left: "right",
              min: 0,
              max: 500,
              dimension: 1,
              pieces: [
                { min: 300 },
                { min: 200, max: 300 },
                { min: 150, max: 200 },
                { min: 100, max: 150 },
                { min: 50, max: 100 },
                { max: 50 },
              ],
              color: [
                "#7e0123",
                "#98004b",
                "#fe0000",
                "#ff7e00",
                "#ffff00",
                "#01e400",
              ],
            },
          ],
          series: [
            {
              type: "bar",
              encode: {
                x: "aqi",
                y: "name",
              },
            },
          ],
        };
        myChart1.setOption(option);
      }

      $(".side-bar>.menu>li")[0].addEventListener("click", function (e) {
        // console.log(this);

        $(".chart-outer")[0].style.display = "block";
        forNothing(url1, dataTen, loadBar);
      });

      $(".chart-outer button")[0].addEventListener("click", function (e) {
        $(".chart-outer")[0].style.display = "none";
      });

      function loadBottomBar(data) {
        const myChart = echarts.init(document.getElementById("chart"));
        const option = {
          title: {
            text: "全国空气质量最差城市实时排名",
            left: "center",
          },
          tooltip: {},
          grid: {
            containLabel: true,
            right: 120,
          },
          dataset: {
            dimensions: ["name", "aqi", "level", "time"],
            source: data.reverse(),
          },
          xAxis: {
            name: "AQI",
          },
          yAxis: {
            type: "category",
            // data: cityName
          },
          visualMap: [
            {
              orient: "vertical",
              type: "piecewise",
              left: "right",
              min: 0,
              max: 500,
              dimension: 1,
              pieces: [
                { min: 300 },
                { min: 200, max: 300 },
                { min: 150, max: 200 },
                { min: 100, max: 150 },
                { min: 50, max: 100 },
                { max: 50 },
              ],
              color: [
                "#7e0123",
                "#98004b",
                "#fe0000",
                "#ff7e00",
                "#ffff00",
                "#01e400",
              ],
            },
          ],
          series: [
            {
              type: "bar",
              encode: {
                x: "aqi",
                y: "name",
              },
            },
          ],
        };
        myChart.setOption(option);
      }

      $(".side-bar>.menu>li")[1].addEventListener("click", function (e) {
        // console.log(this);

        $(".chart-outer")[0].style.display = "block";
        forNothing(url2, dataTen, loadBottomBar);
      });
    </script>

    <script>
      let isLoaded = false;
      let heatMapLayer = new Loca.HeatmapLayer({
        map: map,
      });

      function loadHeatMapLayer(data) {
        let list = [];
        for (let i = 0; i < data.length; i++) {
          const pos = data[i].pos.split(",");

          list.push({
            coordinate: [Number(pos[0]), Number(pos[1])],
            count: data[i].aqi,
          });
        }

        // console.log(data);

        heatMapLayer.setData(list, {
          lnglat: "coordinate",
          value: "count",
        });

        heatMapLayer.setOptions({
          style: {
            radius: 16,
            color: {
              0.5: "#2c7bb6",
              0.65: "#abd9e9",
              0.7: "#ffffbf",
              0.9: "#fde468",
              1.0: "#d7191c",
            },
          },
        });

        heatMapLayer.render();
      }

      $(".heatmap")[0].addEventListener("click", (e) => {
        if (isLoaded) {
          map.remove(heatMapLayer);
          layer.show();
          isLoaded = false;
        } else {
          isLoaded = true;
          layer.hide();
          forNothing(
            "http://127.0.0.1:3000/api/getcitydetail",
            data,
            loadHeatMapLayer
          );
        }
      });
    </script>
  </body>
</html>
